/**
 * @file filter
 * @author liaoxuezhi@baidu.com
 */
/* eslint fecs-indent: [0, "space", 2, 2] */

import * as React from 'react';
import {
  PureComponent,
  PropTypes
} from 'react';
import {render, filter, evalExpression} from '../renderer';
import * as cx from 'classnames';
import * as assign from 'object-assign';
import * as omit from 'lodash/omit';
import * as pick from 'lodash/pick';
import FormItem from './form-item';

@FormItem({
  type: 'hbox',
  attachForm: false,
  hideLabelByDefault: true,
  validateSchema: false // "http://amis.baidu.com/schemas/form.json#/definitions/hbox"
})
export default class HBoxFormItem extends PureComponent {
  static propTypes = {
    className: PropTypes.string
  };

  static defaultProps = {
    className: ''
  };

  render() {
    const {
      $path,
      mode,
      horizontal,
      horizontalDeeper,
      inputClassName,
      columns,
      data
    } = this.props;

    const subProps = omit(this.props, ['className', 'columns']);

    return (
      <div className={cx('hbox', inputClassName)}>
        {columns && columns
          .filter(item => item.visibleOn ? evalExpression(item.visibleOn, data)
            : item.hiddenOn ? !evalExpression(item.hiddenOn, data) : true)
          .map((child, key) => (
            <div className={cx('col', child.columnClassName)} key={key}>
              {child.type ? render(`${$path}/${child.type}`, child, assign(subProps, {
                  elementsOnly: true,
                  mode: child.mode || mode || 'normal',
                  horizontal: child.horizontal || horizontal,
                  horizontalDeeper: child.horizontalDeeper || horizontalDeeper
                })) : render(`${$path}/basic-form`, child, assign(subProps, {
                elementsOnly: true,
                mode: child.mode || mode || 'normal',
                horizontal: child.horizontal || horizontal,
                horizontalDeeper: child.horizontalDeeper || horizontalDeeper
              }))}
            </div>
          ))}
      </div>
    );
  }
}
